<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="240rpx" rightWidth="240rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">帮助与客服</text>
			<template slot="right">
				<button class="help-btn" @tap="$CHS.goAbout('guide')">用户使用手册</button>
			</template>
		</uni-nav-bar>
		<view class="head" :class="navBorder ? 'navborder':''">
			<view class="tab flex-r ac">
				<view class="tab-list flex-r ac jc" v-for="(item,index) in tabList" :class="{'active': tabCur == index}" :key="index" @tap="tabChange(index)">
					<text class="text-primary">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="body-tab" @touchstart="touchStart" @touchend="touchEnd">
			<keep-alive>
			<QuestionRules v-if="tabCur == 0"></QuestionRules>
			</keep-alive>
			<keep-alive>
			<view class="body-tab-service flex-c ac" v-if="tabCur == 1">
				<view class="service">
					<view class="service-qrcode flex-c ac" v-if="service">
						<image :src="service.serverUrl" mode="widthFix"></image>
						<text class="color-grey" v-if="weixin">长按识别二维码添加客服</text>
						<text class="color-grey" v-else>截图到微信扫描二维码添加客服</text>
					</view>
					<view class="service-info flex-c" v-if="service">
						<view class="info-item flex-r">
							<text class="color-grey">客服电话</text>
							<text class="des" selectable @tap="copyPhone(service.serverPhone)">{{service.serverPhone}}</text>
						</view>
						<view class="info-item flex-r">
							<text class="color-grey">服务时间</text>
							<text class="des">周一至周日 {{service.serverBeginTime}}至{{service.serverEndTime}}</text>
						</view>
					</view>
				</view>
			</view>
			</keep-alive>
		</view>
	</view>
</template>

<script>
	import QuestionRules from "@/components/ch-rules/ch-questionrules.vue"
	export default {
		data() {
			return {
				tabList: [
					{name: '常见问题'},{name: '人工客服'}
				],
				tabCur: 0,
				service: null,
				navBorder: false,
				weixin: false,
			}
		},
		components: {
			QuestionRules
		},
		onLoad() {
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/micromessenger/i) == "micromessenger"){
				this.weixin = true
			}else{
				this.weixin = false
			}
			if(this.$Route.query.tabCur){
				this.tabChange(this.$Route.query.tabCur)
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		methods: {
			//客服
			getService() {
				this.$http.get({
					url: '/api/notify/queryRandomServerPerson'
				}).then((data) => {
					console.log(data);
					if(data.success && data.result){
						this.service = data.result
					}
				})
			},
			//复制电话
			copyPhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			//选项卡切换
			tabChange(index) {
				this.tabCur = index;
				if(index == 1 && !this.service){
					this.getService()
				}
			},
			touchStart(e) {
				console.log('===')
				if (e.changedTouches.length == 1) {
					this.startX = e.changedTouches[0].clientX
					this.startY = e.changedTouches[0].clientY
				}
			},
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					var endY = e.changedTouches[0].clientY;
					var xTowards = endX - this.startX;
					var yTowards = endY - this.startY;
					if (xTowards > 50 && Math.abs(yTowards) < 50) {//向右
						console.log('向右')
						if(this.tabCur > 0){
							this.tabChange(this.tabCur - 1)
						}
					}
					if (xTowards < -50 && Math.abs(yTowards) < 50) {//向左
						console.log('向左')
						let maxlen = this.tabList.length - 1;
						if(this.tabCur < maxlen){
							this.tabChange(this.tabCur + 1)
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.container{
		.ch-nav{
			.help-btn{
				height: 50rpx;
				padding: 0 30rpx;
				margin: 0 20rpx 0 0;
				box-sizing: border-box;
				background: #F2F6FF;
				border: 2rpx solid #0055FF;
				border-radius: 25rpx;
				font-size: 24rpx;
				line-height: 46rpx;
				color: #0055FF;
			}
		}
		.head{
			max-width: $max-width;
			margin: $pc-margin;
			width: 100%;
			position: fixed;
			background-color: #FFFFFF;
			background-image: url("~@/public/images/public/fgx.png");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: auto 32rpx;
			z-index: 2;
			.tab{
				.tab-list{
					flex: 2;
					height: 88rpx;
					.text-primary{
						color: #666666;
					}
					&.active{
						.text-primary{
							font-weight: 500;
							color: #0055FF;
						}
						background-image: url("~@/public/images/public/zjdl_hk.png");
						background-repeat: no-repeat;
						background-position: bottom center;
						background-size: 96rpx 8rpx;
					}
				}
				.tab-list:first-child text{
					margin-right: 0;
				}
			}
		}
		.body-tab{
			padding-top: 88rpx;
			.body-tab-service{
				min-height: calc(var(--safe-height) - #{$navbar-height} - 88rpx);
				padding: 60rpx 45rpx calc(var(--safe-area-inset-bottom) + 60rpx);
				box-sizing: border-box;
				background-color: #0055FF;
				background-image: url("~@/public/images/user/rgkf_bg.png");
				background-repeat: no-repeat;
				background-origin: content-box;
				background-position: 0 0;
				background-size: 660rpx 974rpx;
				.service{
					width: 660rpx;
					background-image: url("~@/public/images/user/fgxx.png");
					background-repeat: no-repeat;
					background-position: 60rpx 717rpx;
					background-size: 540rpx 2rpx;
				}
				.service-qrcode{
					height: 627rpx;
					padding-top: 90rpx;
					image{
						width: 500rpx;
					}
					text{
						margin: 20rpx 0 0;
						line-height: 36rpx;
						font-size: 30rpx;
					}
				}
				.service-info{
					margin: 80rpx 0 40rpx;
					padding: 0 60rpx;
					.info-item{
						align-items: center;
						justify-content: space-between;
						margin-bottom: 40rpx;
						.color-grey{
							font-size: 30rpx;
							line-height: 30rpx;
						}
						.des{
							font-size: 32rpx;
							font-family: Arial;
							line-height: 32rpx;
						}
					}
				}
			}
		}
	}
</style>
